<template>
	<view class="">
		
	
	<view class="body">
		<view class="title">
			<view class="title-1">
				<view class="text1">
					国泰基金混合(350089)
				</view>
				<view class="text2">
					交易记录
				</view>
			</view>
			<view class="title-2">
				<view class="text">
					3230.27
				</view>
				<view class="text2">
					金额(元)
				</view>
			</view>
			<view class="title-3">
				<view class="">
					<view class="text">
						35.72
					</view>
					<view class="">
						昨日收益(元)
					</view>
				</view>
				<view class="">
					<view class="text1">
						230.27
					</view>
					<view class="">
						持有收益(元)
					</view>
				</view>
				<view class="">
					<view class="text2">
						+5.07%
					</view>
					<view class="">
						持有收益率
					</view>
				</view>
			</view>
			</view>
			<view class="item">
				<view class=" item-1">
					<text v-for="item in tabsList" :key="item.id" :class=" {textshow:item.id==id}"
						@click="changid(item.id)">
						{{item.name}}

					</text>
					
			
						<view class="content">
							<view class="charts-box">
								<qiun-data-charts type="line" :chartData="Line" />
							</view>
						
					</view>
					<!-- <text>业绩走势</text>
					<text>累计亏损</text> -->

				</view>
				
			</view>
		
		<view class="play">
			<view class="play-text">
				<text>分红方式</text>
			</view>
			<view class="play-type">
				<view class="text">
					<view class="text1">现金分红</view>
					
				</view>
				<view class="img">
					<image src="@/static/image/icon_guotaijinluhunhe_zhifufangshi@2x.png" mode="">
					</image>
				</view>
			</view>
		</view>
		
	</view>
	<view class="bnt">
		<view class="bnt1" @tap="tolet">
			卖出
		</view>
		<view class="bnt2" @tap="topay">
			买入
		</view>
	</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
			Line: {
				"categories": ["06-20", "06-23", "06-26", "06-30", "07-02"],
				"series": [{
					"name": "累计收入",
					"data": [352.58, 368, 375, 379, 376]
				}]
			},
				id: 1,
				tabsList: [{
					id: 1,
					name: "业绩走势",
					done: true
				}, {
					id: 2,
					name: "累计亏损",
					done: true
				}],
			}
		},
		methods: {
			topay(){
				uni.navigateTo({
					url: ''
				});
			},
			tolet(){
				uni.navigateTo({
					url: '../payment_Bthree/payment_Bthree'
				});
			},
			changid(id) {
				this.id = id


			},
		}
	}
</script>

<style scoped lang="scss">
	.body {
		width: 670rpx;
		margin: 0 auto;
		margin-top: 16rpx;
	}

	.title {
		width: 670rpx;
		height: 334rpx;
		background-color: #ffffff;
		box-shadow: 0rpx 6rpx 20rpx 0rpx rgba(225, 225, 225, 0.2);
		border-radius: 12rpx;
		margin-top: 24rpx;

		.title-1 {
			display: flex;
			justify-content: space-between;

			.text1 {
				// width: 276rpx;
				height: 40rpx;
				font-size: 28rpx;
				line-height: 40rpx;
				color: #2e3033;
			}

			.text2 {
				width: 96rpx;
				height: 34rpx;
				font-size: 24rpx;
				line-height: 34rpx;
				color: #bcc3cd;
			}
		}

		.title-2 {
			width: 194rpx;
			height: 102rpx;
			width: 194rpx;
			font-family: DIN;
			font-size: 56rpx;
			line-height: 82rpx;
			color: #f92f20;
			margin: 0 auto;
			margin-top: 40rpx;

			.text2 {
				height: 34rpx;
				font-size: 24rpx;
				line-height: 34rpx;
				color: #bcc3cd;
				text-align: center;

			}
		}

		.title-3 {
			margin-top: 26rpx;
			display: flex;
			justify-content: space-between;
			font-size: 24rpx;

			color: #bcc3cd;

			.text {
				color: #676b72;
				margin-top: 8rpx;
			}

			.text1 {
				font-size: 32rpx;
				color: #f92f20;
			}

			.text2 {
				color: #f92f20;
				margin-top: 8rpx;
			}
		}

	}

	.item {
		width: 670rpx;
		height: 506rpx;
		background-color: #ffffff;
		box-shadow: 0rpx 6rpx 20rpx 0rpx rgba(225, 225, 225, 0.2);
		border-radius: 12rpx;
		margin-top: 24rpx;
	

		.item-1 {
			font-size: 28rpx;

			text {
				width: 132rpx;
				height: 40rpx;
				text-align: center;
				display: inline-block;

			}

			.textshow {
				border-bottom: 1rpx solid #3a6af6;
				;
			}
			.content {
				margin-top: 108rpx;
				display: flex;
				flex-direction: column;
				flex: 1;
			
				.charts-box {
					width: 100%;
						height: 280rpx;
				}
			}
		}
		
	}
	.play {
		display: flex;
		justify-content: space-between;
		align-items: center;
			height: 72rpx;
	
		.play-text {
			width: 96rpx;
				height: 72rpx;
				font-size: 24rpx;
				line-height: 72rpx;
				color: #676767;
		}
	
		.play-type {
			width: 156rpx;
			// height: 62rpx;
			display: flex;
	
			.text {
				.text1 {
					width: 96rpx;
						height: 72rpx;
						font-size: 24rpx;
						line-height: 72rpx;
						color: #bcc3cd;
				}
				
			}
	
			.img {
				width: 28rpx;
				height: 72rpx;
				margin-left: 8rpx;
				line-height: 72rpx;
				// margin-top: 12rpx;
				image {
					width: 14rpx;
					height: 28rpx;
					margin-left: 14rpx;
				}
			}
		}
	}
	.page{
		position: relative;
	}
	.bnt{
		width: 100%;
	height: 98rpx;
	position: fixed;
	display: flex;
	text-align: center;
	line-height: 98rpx;
	font-size: 40rpx;
	right: 0;
	bottom: 0;
	
	.bnt1{
		width: 376rpx;
			height: 98rpx;
			background-color: #ffffff;
		color: rgba(58, 106, 246, 0.6);
		
	}
	.bnt2{
		width: 376rpx;
			height: 98rpx;
			background-color: #3775f6;
				color: #ffffff;
	}
	}
</style>
